<style>
  .content {
    width: 100%;
    height: 100%;
    background-color: #fff;
    box-sizing: border-box;
  }

  .content .moduleBox {
    background-color: #5a9cf8;
  }

  .content .top {
    height: 5.88rem;
    background-image: url('./res/img/xhdp.png');
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 0.01rem;
    position: relative;
  }

  .top .sign {
    /* margin-top:1.76rem; */
    padding-top: 1.2rem;
    width: 3.27rem;
    height: 3.27rem;
    margin: 0 auto;
  }

  .signImg {
    width: 3.09rem;
    height: 3.08rem;
    margin: 0.13rem auto;
    background-image: url('./res/img/xhdpOval.png');
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 0.01rem;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }

  .signState {
    width: 2.58rem;
    height: 2.57rem;
    border-radius: 1.29rem;
    background-color: #fff;
    margin: 0.2rem auto;
    margin-top: 0.22rem;
    padding-top: 0.01rem;
  }

  .grayBorder {
    background-color: #ccd;
  }

  .noSign,
  .signFinish {
    width: 100%;
    height: 100%;
    position: relative;
    color: #666;
    font-size: 0.46rem;
  }

  .noSign p,
  .signFinish p {
    text-align: center;
  }

  .noSign p.signText,
  .signFinish p.signText {
    margin-top: 0.8rem;
  }

  .noSign p.signText {
    color: #7ce4ff;
  }

  .count {
    font-size: 0.16rem;
    margin-top: 0.2rem;
  }

  .signState i {
    font-style: normal;
    margin-left: -0.05rem;
  }

  .integral {
    width: 2.66rem;
    height: 0.52rem;
    margin: 0 auto;
    text-align: center;
    color: #fff;
    font-size: 0.24rem;
    line-height: 0.52rem;
    border-radius: 1rem;
    background-color: #000;
    opacity: 0.5;
  }

  .integral i {
    font-style: normal;
    color: yellow;
    display: inline-block;
    margin-left: -0.05rem;
    margin-right: 0.01rem;
  }

  .month {
    position: absolute;
    left: 0.3rem;
    bottom: 0.44rem;
    width: 0.91rem;
    height: 0.41rem;
    background-image: url('./res/img/xhdpdate.png');
    background-repeat: no-repeat;
    background-size: cover;
    color: #fff;
    text-align: center;
    line-height: 0.48rem;
    font-size: 0.26rem;
  }

  .content .middle {
    width: 100%;
    position: relative;
  }

  .middle .arrow {
    position: absolute;
    left: 0.44rem;
    top: -0.32rem;
    width: 0;
    height: 0;
    border-width: 0.18rem;
    /*代表虚线的一个点*/
    border-style: dashed;
    border-color: transparent;
    border-bottom-style: solid;
    border-bottom-color: #fff;

  }

  .middle .week {
    list-style: none;
    height: 0.48rem;
    padding: 0.06rem 0.66rem;
    font-size: 0.26rem;
    line-height: 0.48rem;
    border-radius: 1px;
  }

  .middle .week li {
    float: left;
    margin-right: 0.72rem;
    width: 0.26rem;
    height: 0.37rem;
    line-height: 0.37rem;
  }

  .week li:last-child {
    margin-right: 0;
  }

  .week li:first-child,
  .week li:last-child {
    color: #4C8FFB;
  }

  .date {
    margin: -0.24rem 0.30rem 0;
    list-style: none;
  }

  .date li {
    float: left;
    margin-right: 0.075rem;
    width: 0.91rem;
    height: 0.911rem;
    background-color: #FFFFFF;
    box-shadow: 0 0.02rem 0.15rem 0 rgba(190, 190, 190, 0.50);
    border-radius: 0.12rem;
    text-align: center;
    line-height: 0.911rem;
    font-size: 0.36rem;
    color: #333;
    margin-bottom: 0.116rem;
    position: relative;
  }

  .date li.spaceLeft {
    box-shadow: none;
    border-radius: 0;
  }

  .date li .dateColor {
    color: #999999;
  }

  .date li .symbol {
    width: 0.47rem;
    height: 0.47rem;
    position: absolute;
    left: 0.239rem;
    top: 0.15rem;
    background-image: url('./res/img/xhdpGroup.png');
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 100;
  }

  .date li .dateNum {
    font-size: 0.13rem;
    color: #fff;
    width: 0.31rem;
    height: 0.38rem;
    position: absolute;
    left: 0;
    top: 0;
    background-image: url('./res/img/xhdpPath.png');
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
  }

  .date .dateNum i {
    font-style: normal;
    position: absolute;
    width: 0.31rem;
    height: 0.38rem;
    left: -0.04rem;
    top: -0.33rem;
  }

  .date li .integralCount {
    position: absolute;
    width: 0.319rem;
    height: 0.28rem;
    left: 0.28rem;
    bottom: 0.3rem;
    font-size: 0.2rem;
    color: #5A9CF8;
  }


  .date li:last-child {
    margin-right: 0;
  }

  .content .bottom {
    width: 100%;
  }

  .bottom .instruction {
    font-size: 0.28rem;
    color: #333333;
    text-align: center;
    margin-bottom: 0.08rem;
  }

  .instruction span {
    display: inline-block;
    vertical-align: top;
  }

  .instruction .calendar {
    width: 0.37rem;
    height: 0.39rem;
    margin-right: 0.204rem;
    background-image: url('./res/img/calendar.png');
    background-repeat: no-repeat;
    background-size: cover;
  }

  .bottom .detail {
    padding: 0 0.30rem 0.6rem;
    background-color: #fff;
  }

  .detail p {
    padding-left: 0.26rem;
    position: relative;
    font-size: 0.24rem;
    color: #666;
    margin-bottom: 0.08rem;
  }

  .detail p span {
    box-sizing: border-box;
    content: "";
    position: absolute;
    width: 0.13rem;
    height: 0.13rem;
    border-radius: 0.065rem;
    left: 0;
    top: 0.08rem;
    border: 0.048rem solid #779FFD;
  }
</style>
<div class="content">
  <div class="top">
    <div class="sign">
      <div class="signImg">
        <div class="signState" ng-class="{grayBorder:flag}">
          <div class="noSign" ng-show="!flag" ng-click="signAlert()">
            <p class="signText">签到</p>
            <p class="count">已累计
              <i>{{signDays}}</i>天</p>
          </div>
          <div class="signFinish" ng-show="flag" ng-click="signAlert()">
            <p class="signText">已签到</p>
            <p class="count">已累计
              <i>{{signDays}}</i>天</p>
          </div>
        </div>
      </div>
    </div>
    <div class="integral">
      今日签到可获
      <i>{{signPoint}}</i>薏米
    </div>
    <div class="month">{{month}}月</div>
  </div>
  <div class="middle">
    <div class="arrow"></div>
    <ul class="week clearfix">
      <li ng-repeat="week in weekTable">{{week}}</li>
    </ul>
    <ul class="date clearfix">
      <li ng-repeat="day in dayArrays" ng-class="{spaceLeft:day.date==''}">
        <span ng-show="!day.signed" ng-class="{dateColor:day.weekDay=='六' || day.weekDay=='日'}">{{day.date}}</span>
        <span ng-show="day.signed">
          <span class="symbol"></span>
          <span class="dateNum">
            <i>{{day.date}}</i>
          </span>
          <span class="integralCount">+{{day.integral}}</span>
        </span>
      </li>
    </ul>
  </div>
  <div class="bottom">
    <div class="instruction">
      <span class="calendar"></span>
      <span>签到说明</span>
    </div>
    <div class="detail">
      <p>
        <span></span>连续签到获得金币累加。</p>
      <p>
        <span></span>每日签到可获取2薏米，连续签到3天可获得额外奖励，奖励7 分连续签到7天可获得额外奖励15薏米。
      </p>
      <p>
        <span></span>签到周期为7天，每到一个签到周期，签到重新计算。</p>
    </div>
  </div>
  <div ng-if="showSignAlert" class="cover">
    <sign-alert ng-class="{moduleBox:showSignAlert}" show-sign='$parent.showSignAlert' sign-point='$parent.signPoint'></sign-alert>
  </div>
</div>
<script>
  document.title = "签到";//页面标题
  var ua = navigator.userAgent.toLowerCase();
  if (/iphone/.test(ua) || /ios/.test(ua) || /ipad/.test(ua) || /^apple$/.test(ua)) {
    navTitleHandler(title = '签到')
  }
  //跳转到APP原生页
  function goMall() {
    if (/iphone/.test(ua) || /ios/.test(ua) || /ipad/.test(ua) || /^apple$/.test(ua)) {
      signinHandler()
    } else if (/android/.test(ua)) {
      window.Hstation.showIntegralMall()
    } else {
      // window.location.href = "http://a.app.qq.com/o/simple.jsp?pkgname=com.lincomb.licai";
    }
  }
</script>